<template>
    <div class="body">
        <el-skeleton animated :rows="18" :loading="data.isFirst">
            <div class="mycard">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="grid-content ep-bg-purple">
                            <p style="color: grey;position: relative;right: 95px;top: 15px;font-size: 15px;">总销售额</p>
                            <p class="iconfont icon-chongzhi1" style="color: black;font-size: 28px;position: relative;top: 25px;right: 65px;">￥{{ data.sale.sum }}</p>
                            <div class="el-divider el-divider--horizontal" style="width: 90%;position: relative;left: 15px;top: 25px;"></div>
                            <p style="color: black;position: relative;top: 8px;right: 100px;font-size: 14px;">日销售额</p>
                            <p style="color: black;position: relative;right: 44px;bottom: 16px; font-size: 16px;">￥{{ data.sale.today }}</p>
                        </div>
                    </el-col>
                    <el-col :span="6">
                         <div class="grid-content ep-bg-purple">
                            <p style="color: grey;position: relative;right: 95px;top: 15px;font-size: 15px;">会员数量</p>
                            <p class="iconfont icon-huiyuan" style="color: black;font-size: 28px;position: relative;top: 25px;right: 90px;">{{data.vipcount.sum}}人</p>
                            <div class="el-divider el-divider--horizontal" style="width: 90%;position: relative;left: 15px;top: 25px;"></div>
                            <p style="color: black;position: relative;top: 8px;right: 100px;font-size: 14px;">今天新增</p>
                            <p style="color: black;position: relative;right: 44px;bottom: 16px; font-size: 16px;">{{data.vipcount.today}}</p>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content ep-bg-purple">
                            <p style="color: grey;position: relative;right: 95px;top: 15px;font-size: 15px;">优质会员</p>
                            <p class="iconfont icon-youzhi" style="color: black;font-size: 28px;position: relative;top: 25px;right: 90px;">{{data.activecount.sum}}人</p>
                            <div class="el-divider el-divider--horizontal" style="width: 90%;position: relative;left: 15px;top: 25px;"></div>
                            <p style="color: black;position: relative;top: 8px;right: 100px;font-size: 14px;">今日新增</p>
                            <p style="color: black;position: relative;right: 44px;bottom: 16px; font-size: 16px;">{{data.activecount.today}}</p>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content ep-bg-purple">
                            <p style="color: grey;position: relative;right: 95px;top: 15px;font-size: 15px;">消费次数</p>
                            <p class="iconfont icon-gaoxiaofei" style="color: black;font-size: 28px;position: relative;top: 25px;right: 90px;">{{data.consumption.sum}}次</p>
                            <div class="el-divider el-divider--horizontal" style="width: 90%;position: relative;left: 15px;top: 25px;"></div>
                            <p style="color: black;position: relative;top: 8px;right: 100px;font-size: 14px;">今日单数</p>
                            <p style="color: black;position: relative;right: 44px;bottom: 16px; font-size: 16px;">{{data.consumption.today}}</p>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="charts-container">
                <div>
                    <div ref="chartRef" class="chart"></div>
                    <!-- 双柱状图 -->
                    <div ref="barChart" class="chart"></div>
                    <!-- 折线图 -->
                    <div ref="lineChart" class="chart"></div>
                </div>
            </div>
        </el-skeleton>
    </div>
</template>

<script setup lang="ts">

import { Add_Dic, Delete_Dic, Edit_Dic, Get_Singlr_Dic_Type, Up_Dic } from '@/api/dic';
import type { dictionary_Dto } from '@/Dto/Request/dic/dictionary_Dto';
import Api_Code from '@/Dto/Response/Api_code';
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import { msg } from '@/utils/msg';
import { ElMessage } from 'element-plus';
import { da } from 'element-plus/es/locales.mjs';
import { AddVIP, GetVIPTypeById, UpdateVIP, GetAllVipType, GetAllVIP } from '@/api/vip';
import router from '@/router';


const route = useRoute();
const data = reactive<dictionary_Dto>({
    isFisrt: true,
    isFirst: true,
    loading: false,
    did: '',
    data: [],
    curr_right: {},
    isModel: false,
    isDetail: false,
    isOpen: false,
    name: '',
    myuser: '',
    alluser: [],
    address: '',
    phone: '',
    wx: '',
    time: '',
    qq: '',
    desc: '',
    school: '',
    allviptype: [],
    explain: '',
    type: {},
    dic: {
        id: '',
        name: '',
        effectivetime: 0,
        did: '',
        dname: ''
    }
})
const methods = {
    async bind() {
        const res = await GetAllVIP({
            key: '',
            page: 1,
            limit: 10
        })
        data.data = res.data.data;

        const res2 = await GetAllVipType({})
        console.log(res2,'===')
        data.allviptype = res2.data
        data.curr_right = data.allviptype.length == 0 ? {} : data.allviptype[0];
   
        // if (res.code === Api_Code.ok) {
        //     ///所有会员
        //     data.data = res.data.list;
        //     ///当前会员类型
        //     data.type = res.data.type;
        //     ///所有用户
        //     data.alluser = res.data.alluser;
        data.isFirst = false;
        //     ///所有会员类型
        // }
    }
}
const defaultProps = {
    children: 'children',
    id: 'id',
    label: 'name',
}
const handleNodeClick = (hh) => {
    data.curr_right = hh;
}
const event = {
    opdetails(val: any) {
        router.push('/vip/detail_detail/' + val.id)
    },
    //子级字典编辑
    async editdic() {

        data.isOpen = false
        data.loading = true
        const res = await UpdateVIP({
            id: data.dic.id,
            effectivetime: data.dic.effectivetime,
            name: data.dic.name
        })
        if (res.code === Api_Code.ok) {

            methods.bind()
            data.loading = false
            msg(res)
        } else {
            msg(res)
        }
    },
    //关闭子级字典编辑模态框
    handleClose() {
        data.isOpen = false
    },
    ///打开子级字典编辑模态框
    Up_dic(dic: any) {
        data.isOpen = true;
        data.dic.id = dic.id
        data.dic.effectivetime = dic.effectivetime;
        data.dic.name = dic.name;
        data.dic.did = dic.did


    },
    //新增字典
    async add() {
        // data.isModel = false
        if (data.name == '' || data.address == '' || data.school == '' || data.qq == '' || data.desc == '' || data.wx == '' || data.phone == '' || data.myuser == '' || data.effectivetime == '') {
            ElMessage.error("请完整填写数据");
            return;
        }
        data.loading = true
        const res = await AddVIP({
            name: data.name || '',
            address: data.address || '',
            school: data.school || '',
            wechat: data.wx || '',
            qq: data.qq || '',
            phone: data.phone || '',
            record: data.myuser || '',
            desc: data.desc || '',
            cdid: data.type.dId || '',
            remark: '',
            effectivetime: data.time || 0
        })
        data.isModel = false
        if (res.code === Api_Code.ok) {
            methods.bind()
            setTimeout(() => {
                data.loading = false
            }, 1000)
            data.name = '';
            data.address = '';
            data.school = '';
            data.qq = '';
            data.wx = '';
            data.desc = '';
            data.phone = '';
            data.myuser = '';
            data.effectivetime = '';
            msg(res)
            data.isModel = false
        } else {
            data.loading = false
            msg(res)
        }
    },
    //打开模态框
    model() {
        data.isModel = true;
    },
    //编辑类别
    edit() {
        data.isEdit = true
    },
    //删除字典
    async del_dic(id: string) {

        data.loading = true
        const res = await Delete_Dic({
            ids: [id]
        })
        if (res.code === Api_Code.ok) {
            methods.bind()
            data.loading = false
            msg(res)
        } else
            data.loading = false
        msg(res)
    },
    //修改字典类别
    async save() {
        data.loading = true
        const res = await Up_Dic({
            id: route.params.id.toString(),
            name: data.data.name,
            key: data.data.key,
            value: data.data.value
        })
        if (res.code === Api_Code.ok) {
            data.isEdit = false
            data.loading = false
            msg(res)
        } else {
            data.isEdit = false
            data.loading = false
            msg(res)
        }
    }

}

onMounted(async () => {
    methods.bindsale();
     methods.bindvipcountcard();
     methods.bindactive();
     methods.bindconsumption();
    await methods.bindvipcount();
    await methods.bindRecharge();
    await methods.bindactiveEcharts();
    console.log(data.Rechargerankingname)
    renderBarChart();
    renderLineChart();
    renderActive();
    data.isFirst=false;
    // 监听窗口大小变化，调整图表大小
    window.addEventListener('resize', () => {
        if (barChart.value) echarts.getInstanceByDom(barChart.value)?.resize();
        if (lineChart.value) echarts.getInstanceByDom(lineChart.value)?.resize();
    });
});
</script>

<style scoped>
.mycard {
    padding-top: 18px;
    display: flex;
}
.grid-content{
    height: 160px;
    width: 340px;
    background: white;
    border-radius: 8px;
    margin: 6px;
    transition: all 0.3s ease
}
.grid-content:hover{
    transform: translateY(-4px) scale(1.02);
box-shadow: rgba(0, 0, 0, 0.2) 0px 14px 24px;

}

.el-col {
    text-align: center;
    
}

.charts-container {
    padding: 8px;
    margin: 8px;
    display: flex;
    flex-direction: column;
    /* 垂直排列 */
    gap: 20px;
    /* 图表之间的间距 */
    padding: 20px;
    /* 内边距 */
    background: white;
    border-radius: 8px;
}

.body {
    overflow: hidden;
    background: #F0F2F5;
}

.chart {
    width: 100%;
    /* 宽度占满容器 */
    height: 400px;
    /* 固定高度 */
}
.iconfont{
    color: black;
}
/* .mycard {
    margin: 16px;
    display: flex;
} */
</style>